<template>
    <div class="Collection">
     <div class="header">
        <van-nav-bar title="我的收藏" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <div class="Collection_con">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="text"
          @load="onLoad"
          :offset="100"
          :immediate-check="false"
        >
        <ul v-if="Collection.list && Collection.list.length>0">
          <li v-for="(item,index) in Collection.list" :key="index">
            <div class="Collection_title">
              <p>{{item.shopName}}</p>
            </div>
            <div class="Collection_div">
              <div class="Collection_img" @click="link(item)">
                <img :src="item.image_url"/>
              </div>
              <div class="Collection_right">
                <p class="Collection_p1" @click="link(item)">{{item.name}}</p>
                <p class="Collection_p2">￥{{item.price}}</p>
                <p class="Collection_p3">{{item.count}}人收藏</p>
                <p class="Collection_p4" @click="remove(item,index)">
                  <i class="icon iconfont icon-star-empty"></i>
                  删除收藏</p>
              </div>
            </div>
          </li>
        </ul>
          <div class="empty" v-else>暂无数据</div>
        </van-list>
        </van-pull-refresh>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Collection",
      data() {
        return {
          Collection: [],
          CollectionList:[],
          //下拉刷新
          isLoading: false,
          //上拉加载
          loading: false,
          finished: false,
          pageNum: 1,
          text:'',
        }
      },
      created:function () {
        setTitle('我的收藏')
      },
      mounted: function () {
        this.getCommodityCart()
      },
      methods: {
        onClickLeft() {
          this.$router.go(-1);
        },
        //跳转商品详情页
        link(item){
          console.log(item);
          this.$router.push({
            name:'商品详情', query:{id:item.id}})
        },
        //下拉刷新
        onRefresh() {
          this.getCommodityCart()
        },
        //上拉加载
        onLoad() {
          if (this.Collection.list && this.Collection.list.length > 0) {
            this.getCommodityCart();
          }
        },
        //获取商品信息
        async getCommodityCart() {
          var list=[]
          var list=JSON.parse(localStorage.getItem('userInfo'))
          this.list=list
          var userID = list.userId;
          let params = {
            user_id:userID,
            pageNum:this.pageNum,
            pageSize: 10,
          };
          const res = await this.$axios.post(this.$api.CollectData, params);
          if (res.success) {
            if (this.loading) {
              this.CollectionList = this.CollectionList.concat(res.data.list);
              this.Collection = res.data;
              this.Collection.list = this.recordDataList;
              if (this.Collection.list.length >= this.Collection.total) {
                this.finished = true;
              } else {
                this.pageNum++;
              }
            } else {
              this.Collection = res.data;
              if (this.Collection.list.length >= this.Collection.total) {
                this.finished = true;
                this.text='没有更多了'
              }
            }
            this.isLoading = false;
            this.loading = false;
          } else {
            this.$toast(res.msg);
          }
        },
        //删除
        async remove(item,index){
          var list=[]
          var list=JSON.parse(localStorage.getItem('userInfo'))
          this.list=list
          var userID = list.userId;
          let Id= item.id;
          let params = {
            product_id:Id,
            user_id:userID,
          };
		  console.log(this.$api.collectProductList)
		  console.log(index)
		  console.log( this.Collection.list.splice(index,1))
		  //删除数组下表为index的1个数组
		  
          const res = await this.$axios.post(this.$api.collectProductList, params);
          if (res.success) {
            this.Collection.list.splice(index,1) //删除数组下表为index的1个数组
            res.isfiag = 1
            this.getCommodityCart()
            this.$toast('删除成功');
          } else {
            this.$toast(res.msg);
          }
        },
      },
    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
</style>
